/*
 * @Author: mayijun
 * @Date: 2022-05-14 09:25:52
 * @LastEditors: mayijun
 * @LastEditTime: 2022-08-10 10:54:14
 */
//指标取数首页
import { ElCol, ElRow } from 'element-plus';
import { defineComponent, onMounted, reactive, ref } from 'vue';
import './index.scss';
import { Right } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import * as RouteNames from '@/router/consts';
import GroupTree from '@/components/GroupTree';
import API from '@/services';
import shrinkLeft from '@/assets/images/shrinkLeft.svg';
import activeShrinkLeft from '@/assets/images/activeShrinLeft.svg';
import PageCaontainer from '@/arco-components/PageContainer';
const IndexService = defineComponent({
  name: 'IndexService',
  setup: (props, { slots, attrs, emit }) => {
    const router = useRouter();
    /* 收缩状态 */
    const toggle = ref(false);
    const shrinkIcon = ref(shrinkLeft);

    const searchForm = reactive({
      groupId: undefined,
      pageNum: 1,
      pageSize: 10,
      order: undefined,
      sortBy: undefined,
      status: 0
    });

    const state = reactive({
      fetchDataList: [] as any[],
      total: 0
    });

    //跳转取数页面
    const toFetchData = () => {
      router.push({
        name: RouteNames.ROUTE_APPLICATIONFETCHSELF
      });
    };

    // 跳转场景取数
    const toFetchScene = (item: any) => {
      console.log(item, '此时的id')
      router.push({
        name: RouteNames.ROUTE_APPLICATIONFETCHSCENE,
        query: { sceneId: item.id }
      });
    };

    //查询场景取数列表
    const getFetchDataList = async () => {
      try {
        const { code, data }: any = await API.scene.postSceneList(searchForm);
        if (code === 200 && Array.isArray(data?.list)) {
          state.fetchDataList = data.list;
          state.total = data.total;
        }
      } catch (error) {
        console.log(error);
      }
    };

    onMounted(() => {
      getFetchDataList();
    });

    return () => {
      return (
        <PageCaontainer>
          <div class="fetch-data">
            <div class="left" style={{ width: toggle.value ? '0px' : '210px' }}>
              <img
                class={['shrink', toggle.value && 'shrinkRight']}
                onClick={() => (toggle.value = !toggle.value)}
                src={shrinkIcon.value}
                onMouseenter={() => (shrinkIcon.value = activeShrinkLeft)}
                onMouseout={() => (shrinkIcon.value = shrinkLeft)}
                alt=""
              />
              <GroupTree
                titles="场景分类管理"
                listFn={API.scene.getSceneGroupRoot}
                isOperate={false}
                onGetTreeNode={(node: any) => {
                  if (node.id === 'new') return;
                  searchForm.groupId = node.id;
                  searchForm.pageNum = 1;
                  searchForm.pageSize = 10;
                  searchForm.status = 0;
                  getFetchDataList();
                }}
              ></GroupTree>
            </div>
            <div class="right">
              <div class="fetch-title">自助取数</div>
              <div class="card-list">
                <div
                  class="card"
                  onClick={toFetchData}
                  style={{ width: '31%' }}
                >
                  <div class="card-title">
                    <span class="label">DIY取数</span>
                    <span class="link">
                      进入取数
                      <el-icon>
                        <Right />
                      </el-icon>
                    </span>
                  </div>
                  <div class="card-remark">基于指标市场中指标的自助取数</div>
                </div>
              </div>
              <div class="fetch-title">场景取数</div>
              <div class="card-list">
                {state.fetchDataList.map((item) => (
                  <div
                    class="card"
                    style={{
                      backgroundColor: item.sceneColorType,
                      width: '31%'
                    }}
                    onClick={() => {
                      toFetchScene(item);
                    }}
                  >
                    <div class="card-title">
                      <span class="label">{item.cnName}</span>
                      <span class="link">
                        进入取数
                        <el-icon>
                          <Right />
                        </el-icon>
                      </span>
                    </div>
                    <div class="card-remark">{item.description}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </PageCaontainer>
      );
    };
  }
});

export default IndexService;
